<template>
  <div class="contentDiv">
    <div class="colorFont">222222222222</div>
    <div class="mb-15">
      <a-tag
        :color="item"
        v-for="item in colorArr"
        :key="item"
        @click="color = item"
        >{{ item }}</a-tag
      >
    </div>
    <div class="m-x-10 fs-25">1111</div>
    <!-- 测试上传组件 -->
    <div>
      <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
      >
        <a-form-item label="上传文件" name="uploadFileRule">
          <a-spin :spinning="uploadObj.uploadSpinning">
            <UploadFile
              @uploadFileFn="uploadFileFn"
              :uploadObjData="uploadObj"
            ></UploadFile>
          </a-spin>
        </a-form-item>
      </a-form>
      <div class="flexCenter">
        <a-button type="primary" @click="formSubmit">确定</a-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, provide } from "vue";
import UploadFile from "@/components/uploadFile/index.vue";
import {message} from "ant-design-vue";
const color = ref("red");
const colorArr = ref(["red", "blue", "green", "cyan"]);

const formState = reactive({
  username: "",
  password: "",
  remember: true,
  uploadFileList: [],
  selectValue: undefined,
  dateValue: undefined,
});

// const uName=ref("123");

const uploadObj = reactive({
  fileList: [],
  multiple: true,
  dir: "temp/lw/testVue3/",
  uploadFlag: false,
  uploadSpinning: false,
});

let uploadFileRule = async (_rule, value) => {
  if (uploadObj.uploadFlag === false) {
    return Promise.reject("请上传文件");
  } else {
    return Promise.resolve();
  }
};

const rules = {
  uploadFileRule: {
    required: true,
    validator: uploadFileRule,
    trigger: "change",
  },
};

//父组件
const uploadFileFn = (obj) => {
  // uName.value ='456';
  // console.log(uName.value);
};
const formRef = ref();
const formSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      message.destroy();
      message.success("提交成功");
    })
    .catch((error) => {
      console.log("error", error);
    });
};
</script>

<style lang="scss" scoped>
@import "@/style/handle.scss";
.colorFont {
  @include themesColorFn(v-bind(color));
}
</style>
